<template>
	<view class="plan-main u-skeleton" >
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"  bgcolor="#FFF"></skeleton>

		<view class="skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<view class="wrapper">
				<view class="store-name skeleton-rect" v-text="lineInfo.storeName?lineInfo.storeName:(lineInfo.origin+'-'+lineInfo.destination)"></view>
				<view class="display-flex tscontent">
					<view class="display-flex display-flex-align-end tsmaian skeleton-rect">
						<text class="iconfont iconduigouzhong tsicon"></text>
						<text class="tsctext">提前{{lineInfo.aheadRefundTime/60}}小时可退款</text>
					</view>
					<view class="display-flex display-flex-align-end tsmaian skeleton-rect">
						<text class="iconfont iconduigouzhong tsicon"></text>
						<text class="tsctext">提前{{lineInfo.checkTime}}分钟可检票</text>
					</view>
				</view>
			</view>
			<view class="wrapper display-flex-column">
				<view class="riqi-text skeleton-rect">
					日期选择
				</view>
				<calendar-swiper-new class="skeleton-rect" @handlerCalendar="handlerCalendarTap" @handlerAllCalendar="handlerAllCalendar" :dptDate="dptDate" :saleDate="preSaleDate"></calendar-swiper-new>
				
			</view>
			<view class="wrapper display-flex-column">
				<view class="riqi-text skeleton-rect">
				    {{on_stop_select.stopName}}  → {{off_stop_name}}
				</view>
				<view class="separation-line"></view>
				<view class=" skeleton-rect">
					选择出发地
				</view>
				<view v-if="on_stop_arr.length>0" class="display-flex-flex-wrap ">
					<view @click="selectSta(item)" class="station" v-for="(item, index) in on_stop_arr" :key="index"
					:class="(item.lineStopId==on_stop_id)?'act-red-button':'grey-button'"
					>
					{{item.stopName}}
					</view>
				</view>
				<view class="riqi-text skeleton-rect">
					选择出发班次
				</view>
				<view v-if="regularList.length" class="display-flex-flex-wrap">
				
					<view @click="selectPlan(item)" class="station" v-for="(item, index) in regularList" :key="index"
					:class="(item.planId==planId)?'act-red-button2':'grey-button2'"
					>
						<view class="display-flex-column display-flex-justify-center">
							<text>{{item.dpTime}}</text>
							<text>余票{{item.stock}}</text>
						</view>
					</view>
				</view>
				<view v-else class="no_plan">
					*当日暂无班次，请选择其他日期查看
				</view>
				<view class="skeleton-rect">
					<view class="notice-text" v-if="selectPaln&&selectPaln.planType==2">
						*该班次为滚动发车，{{selectPaln.dpTime}}截止。
					</view>
					<view class="notice-text" v-if="selectPaln&&selectPaln.planType==3">
						*该班次为预约发车，需预约满{{selectPaln.lowestNum}}人发车。预约成功会以短信告知！
					</view>
				</view>
			</view>
			<view v-if="!showSkeleton" class="wrapper display-flex display-flex-align-center">
				<view  @click="godaohang" class="display-flex-column">
					<text class="riqi-text">上车地点</text>
					<view class="display-flex" style="margin-top: 10px;align-items: center;color: #2F2727;">
						<text class="iconfont icondizhi-copy"></text>
						<view class="ellipsis">{{on_stop_select.des?on_stop_select.des:on_stop_select.stopName}}</view>
					</view>
				</view>
				<view @click="videoShow=true" v-if="on_stop_select&&on_stop_select.videNink" class="display-flex-column display-flex-align-center" style="margin-left: auto;">
					<image src="https://qiniu.suxuvip.cn/sp.png" style="width: 35px;height: 35px;" mode=""></image>
					<text style="font-size: 13px;color: #8a8888;">站点视频</text>
				</view>
				<view @click="joinQun()" v-else-if="on_stop_select&&(on_stop_select.image.length>0)"v-else class="display-flex-column display-flex-align-center" style="margin-left: auto;">
					<image src="https://qiniu.suxuvip.cn/zp.png" style="width: 35px;height: 35px;" mode=""></image>
					<text style="font-size: 13px;color: #8a8888;">站点图片</text>
				</view>
				<view @click="godaohang" v-else class="display-flex-column display-flex-align-center" style="margin-left: auto;">
					<image src="https://qiniu.suxuvip.cn/ditu.png" style="width: 35px;height: 35px;" mode=""></image>
					<text style="font-size: 13px;color: #8a8888;">地图</text>
				</view>
				
			</view> 
			<!-- 返程  v-if="selectPaln&&selectPaln.is_return_trip" -->
			<view v-if="selectPaln&&selectPaln.isReturnTrip"  class="u-skeleton-fillet wrapper display-flex-column" style="color: #000000;font-size: 15px;font-weight: 600;">
				<view class="">
					<view class="back-item">
						返程
					</view>
				</view>
				<view>
					<text style="margin: 0 8px;">{{selectPaln.returnDate}}</text>
					<text>发车</text>
				</view>
				<view class="row-center" style="margin: 0 10px;font-size: 16px;font-weight: 600;">
					<view style="max-width: 150px" class="line-ellipsis">{{lineInfo.destination}}</view>
					<text style="margin: 0 5px;">  → </text>
					<view style="max-width: 150px" class="line-ellipsis">{{lineInfo.origin}}</view>
				</view>
			</view>
			<view style='height:120rpx;'></view>
			<view class='footer acea-row row-between-wrapper'>
				
				<view class='settlement' style='z-index:100;margin-left: auto;' @click="goOrderConfirm">下一步</view>
			</view>
		</view>
		<apopup mode="center" :show="videoShow" @close="videoShow=false" :closeable="true" >
			<video id="myVideo" :autoplay="true" :src="on_stop_select.videoLink"
			                    @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
		</apopup>
		<apopup mode="bottom" :show="calendarShow" :safe-area-inset-bottom="true"  height="900" :border-radius="20" @close="calendarShow=false" >
		   <calendar :salesDates="calendarDates"  @callback="dateChange" ></calendar>		
		</apopup>
		
	</view>
</template>

<script>
	import calendarSwiperNew from '@/components/calendar_swiper_new/index'
	import apopup from '@/components/a-popup/index'
	import calendar from '@/components/calendar/index'
	import { preOrderBusApi } from "@/api/order"
	import calendarSwiper from "@/components/calendar_swiper/index.vue"
	
	import {
		getLineDetail,
		getPlanDates,
		getLineDatePlan
	} from '@/api/bus.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	var util = require('@/common/js/util.js');
	var _getDiffDate = util.getDiffDate;
	var _addDay = util.addDay;
	var _dateDiff = util.dateDiff;
	var _parseDate = util.parseDate;
	var _formatDate = util.formatDate
	export default {
		computed: {
		},
		components:{
			calendarSwiperNew, apopup, calendar
		},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				videoShow:false,
				loading: true,
				line_id: '',
				lineInfo:{},
				height: 0,
				scrollTop: 0,
				calendarDates:'',
				dptDate: '',
				preSaleDate: '',
				saleDays: 5,
				disablePrev: false,
				disableNext: false,
				selectDayBean:'',
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: []
				},
				calendarShow: false,
				regularList:[],
				on_stop_arr:[],
				on_stop_select: {},
				off_stop_arr:[],
				on_stop_id: '',
				off_stop_id: '',
				on_stop_name: '',
				off_stop_name: '',
				planId: '',
				selectPaln: {}
			}
		},
		
	
		onLoad(options) {
			let that = this;
			setTimeout(() => {
				this.isNodes++;
			}, 100);
		
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
				 
				}
			});
			that.line_id = options.line_id;
			//扫码携带参数处理
			this.setInitDate(options)
		
		},
		mounted() {
			
			
			
		},
		onShow() {
			
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
			return {
				title: that.storeInfo.storeName || '',
				imageUrl: that.storeInfo.image || '',
				path: '/pages/bus/line_detail?line_id=' + that.line_id + '&spid=' + that.uid
			};
		},
		// #endif
		methods: {
			setInitDate: function(t) {
				var that = this
					
				getPlanDates({line_id:t.line_id}).then(res => {
					this.showSkeleton = false
					
					that.lineInfo = res.data.busLine
					that.calendarDates = res.data.calendarDates
					that.startDate = res.data.firstDate?res.data.firstDate:''
					that.endDate = res.data.endDate?res.data.endDate:''
					that.dptDate = res.data.firstDate ? res.data.firstDate : _formatDate("yyyy-MM-dd")
					that.preSaleDate = _addDay(that.lineInfo.yuSaleNum).day
					that.lineInfo.lineStations.forEach(function(item,index){
						/***不默认选择上下车点*/
						if(index==0){
							that.on_stop_id = item.lineStopId
							that.on_stop_name = item.stopName
							that.on_stop_select = item
						}
						if(index==(that.lineInfo.lineStations.length -1)){
							that.off_stop_id = item.lineStopId
							that.off_stop_name = item.stopName
						}
						if(item.stopType==1){
							that.on_stop_arr.push(item)
						}
						if(item.stopType==2){
							that.off_stop_arr.push(item)
						}
					})
					console.log(111,that.on_stop_id)
					console.log(111,that.off_stop_id)
					console.log(111,that.on_stop_arr)
					that.getRegularList(that.dptDate)
			
					 
					this.info.selected = [];
					
					// 设置日期与价格
					for (var i = 0; i < that.calendarDates.length; i++) {
						this.info.selected.push({
							date:that.calendarDates[i].date_str,
							info: '￥' + that.calendarDates[i].price,
							surplus: 0
						})
					}
				}).catch(err => {
					console.log(2323,err)
					this.showSkeleton = false
				}) 
				
			},
		
		  goOrderConfirm(){
			  /**跳转班次详情*/
			  	console.log(this.selectPaln)
				if(!this.selectPaln){
					uni.switchTab({
						url:"/pages/index/index"
					})
				}
				if(!this.selectPaln.planId){
		
					return this.$util.Tips({
						title: '当前日期暂无班次'
					}); 
				}
			  	var item  = this.selectPaln
			  	if(this.selectPaln.isSell==0){
			  		uni.showModal({
			  		    title: '温馨提示',
			  		    content: '该班次已过最后购买时间！请选择其他班次进行购买',
			  			showCancel: false,
			  			confirmText: '我已知晓',
			  		    success: function (res) {
			  		        if (res.confirm) {
			  		            console.log('用户点击确定');
			  		        } else if (res.cancel) {
			  		            console.log('用户点击取消');
			  		        }
			  		    }
			  		});
			  	} else{
			  		uni.showLoading({
			  			title:"请稍后"
			  		})
			  		preOrderBusApi({
			  			"planId": item.planId,
			  			"lineId": item.lineId,
			  		}).then(res => {
			  			// uni.navigateTo({
			  			// 	url: '/pages/users/order_confirm/index?preOrderNo=' + res.data.preOrderNo
			  			// });
			  			uni.hideLoading()
			  			uni.navigateTo({
			  				url:"/pages/bus/regular_detail/index?line_id="+item.lineId+
			  				'&preOrderNo='+ res.data.preOrderNo+
			  				'&plan_id='+item.planId+
			  				'&line_sn='+this.lineInfo.lineSn+
			  				'&origin='+this.lineInfo.origin+
			  				'&destination='+this.lineInfo.destination+
			  				'&dp_time='+item.dpTime+
			  				'&date='+this.dptDate+
			  				'&plan_type='+item.planType
			  			})
			  			
			  		}).catch(err => {
			  			uni.hideLoading()
			  			return this.$util.Tips({
			  				title: err
			  			});
			  		})
			  	}
			  	
			  	
			  },

		  videoErrorCallback: function(e) {
		            uni.showModal({
		                content: e.target.errMsg,
		                showCancel: false
		            })
		        },
		    selectSta(item){
				this.on_stop_id = item.lineStopId
				this.on_stop_select = item
			},
			selectPlan(item){
				this.planId = item.planId
				this.selectPaln = item
			},
			/**日历选择*/
			dateChange:function(date){
				this.selectDayCalendar(date)
				this.calendarShow =false
				
			},
			selectDayCalendar:function(date){
					this.dptDate = date.fulldate
					this.getRegularList(this.dptDate)
					
					let that = this
					that.calendarDates.forEach(function(res,index){
						res.selected = false
						if(res.date_str == date.fulldate){
							res.selected = true
							that.isSelected = true
							that.selectDayBean = res.date_str
						}
					})
			},
		
			/**获取班次列表*/
			getRegularList:function(date){
				let that = this
				that.regularList = []
				getLineDatePlan({line_id:that.line_id,date:date}).then(res => {
					that.regularList = res.data	
					if(that.regularList.length>0){
						that.planId = that.regularList[0].planId
						that.selectPaln = that.regularList[0] 
					}
				})
			},
			handlerCalendarTap:function(t){
				this.dptDate = t.currentDate
				this.getRegularList(this.dptDate)
					
			},
			handlerAllCalendar:function(){
				this.calendarShow = true
			},
			
			godaohang(){
				var that = this
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude: parseFloat(that.on_stop_select.lat),
					longitude: parseFloat(that.on_stop_select.lng),
					name: that.on_stop_select.stopName
				});
			},
			joinQun:function(){
				   // 预览图片
				   var that = this
				   uni.previewImage({
				   	urls: that.on_stop_select.image
				   });
			},
		
		}

	}
</script>

<style lang="scss" >
	page{
	   // background: linear-gradient(to bottom, #fc4141, #efeff4, #efeff4);
	   background-color: #d9d9d9;
	}
	.wrapper {
		margin: 10px;
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
	}
	 .odcontent {
		 font-size: 14px;
		margin: 10px 12px 0 10px;
	 }
	 .tscontent{
	 	margin: 8px 12px 5px 0;
	 }
	 .tsicon{
	 	color: #1fb504;
	 }
	 .tsctext{
	 	font-size: 12px;
	 	color: #8a8888;
	 }

	 .store-name{
		 font-size: 16px;
		 font-weight: 600;
		 color: #000;
	 }
	 .riqi-text{
		 font-size: 14px;
		 font-weight: 600;
		 color: #000;
	 }
	 .station{
		 margin: 5px 10px 5px 0;
	 }
	 .no_plan{
		 color: #FC4141;
		 text-align: center;
		 margin: 10px;
	 }
	 .notice-text{
		 color: #FC4141;
	 }
	  .footer {
	 	width: 100%;
	 	height: 100rpx;
	 	background-color: #fff;
	 	padding: 0 30rpx;
	 	font-size: 28rpx;
	 	color: #333;
	 	box-sizing: border-box;
	 	position: fixed;
	 	bottom: 0;
	 	left: 0;
	 }
	 
	  .footer .settlement {
	 	font-size: 30rpx;
	 	color: #fff;
	 	width: 240rpx;
	 	height: 70rpx;
	 	background-image: linear-gradient(to right, #fc4141 0%, #fc8f64 100%);
	 	border-radius: 50rpx;
	 	text-align: center;
	 	line-height: 70rpx;
	 }
	 
	 .footer .transparent {
	 	opacity: 0
	 }
	 
	 .placeholder-textarea {
	 	position: relative;
	 
	 	.placeholder {
	 		position: absolute;
	 		color: #ccc;
	 		top: 26rpx;
	 		left: 30rpx;
	 	}
	 }
	 
	 .item {
	 	padding: 27rpx 30rpx;
	 	font-size: 30rpx;
	 	color: #282828;
	 	border-bottom: 1px solid #f0f0f0;
	 }
	 .back-item{
		border-radius: 5px;
		border: 1px solid #007aff;
		padding: 4px 12px;
		color: #007aff;
		display: inline-block;
	 }
</style>
